<template>
	<gracePage :customHeader="false">
		<!-- 页面主体 -->
		<view slot="gBody">
			<!-- 页面內容 -->
			<view class="grace-rows" style="height: 130rpx;background-color: #FFFFFF;margin-bottom: 10rpx;">
				<view @tap="weishiyong_tap()" style="margin-left: 40rpx;margin-top: 30rpx;" :class="weishiyong">未使用
				</view>
				<view @tap="yishiyong_tap()" style="margin-left: 40rpx;margin-top: 30rpx;" :class="yishiyong">已使用</view>
			</view>
			<!-- 优惠券余额 -->
			<view class="hebin">
				<text class="hebin_quan">优惠券抵扣余额</text>
				<text class="hebin_quan1">¥</text>
				<text class="hebin_quan2">{{quanbao}}</text>
				<view class="hebin_quan3" @tap="tiaozhuan">立即使用</view>
			</view>
			<view @tap="gmyhquan" v-show="type=='可用'">
				<image :src="imgs" mode=""
					style="width: 750rpx;height: 360rpx;margin-top: 10rpx;"></image>
			</view>
			<!-- <view style="height: 84rpx;"></view> -->
			<scroll-view :style="{height: (sys.safeArea.height)+'px'}" :scroll-y="true" @scrolltolower="jiazai">
				<view v-for="(item,index) in show_info_list" :key="index" style="margin-top: 20rpx;">
					<view
						style=" width: 714rpx;height: 248rpx;background-size: contain;margin: 0 auto;background-repeat: no-repeat;"
						:style="{backgroundImage:'url('+item.quan_img+')'}">
						<view class="grace-flex grace-columns" style="position: relative;">
							<!-- 有效期 -->
							<text
								style="position: absolute; left: 566rpx;top: 21rpx; font-size:22rpx;color:rgba(255,255,255,1);">有效期至：</text>
							<text
								style="position: absolute; left: 566rpx;top: 51rpx; font-size:22rpx;color:rgba(255,255,255,1);">{{ item.end_time }}</text>
							<!-- 可拆券按钮 -->
							<image @tap="card_chai(item.id)" v-show="item.shiyong===1&&type=='可用'"
								src="../../static/card_coupon_chai.png"
								style="position: absolute;top: 83rpx;left: 357rpx; width: 140rpx;height: 140rpx;">
							</image>
							<!-- 编号 -->
							<text 
								style="position: absolute;top: 10rpx;left: 130rpx; font-size:20rpx;color:#E5006C;">编号：{{ item.number}}</text>
							<!-- 优惠券金额 -->
							<text 
								style="position: absolute;top: 40rpx;left: 330rpx; font-size:38rpx;font-family:Impact;font-weight:400;color:rgba(229,0,108,1);">+</text>
							<text
								style="position: absolute;top: 30rpx;left: 362rpx; font-size:56rpx;font-family:Impact;font-weight:400;color:rgba(229,0,108,1);">{{ item.values}}</text>
							<!-- 赠送优惠券标识 -->
							<view v-show="item.channel=='赠送'"
								style="position: absolute;top: 26rpx;left: 60rpx;width: 1007rpx;font-size:160rpx;color:rgba(204,204,204,0.5);font-weight:bold;">
								赠&emsp;送</view>
						</view>
						<view class="grace-flex-center" style="position: relative;">
							<view @tap="zhuanrs(item.id,item.number)" v-show="item.is_zhuan===1&&type=='可用'" style="position: absolute;top: 104rpx;left: 568rpx; text-align: center;  width:130rpx;height:40rpx;background:rgba(255,255,255,1);border-radius:20rpx;font-size:22rpx;font-weight:bold;color:rgba(239,131,80,1);line-height:40rpx;">
								转让给用户
							</view>
							<view v-show="type=='可用'" @tap="lijisy(item.id)"
								style="position: absolute;top: 170rpx;left: 568rpx; text-align: center;  width:130rpx;height:40rpx;background:rgba(255,255,255,1);border-radius:20rpx;font-size:22rpx;font-weight:bold;color:rgba(239,131,80,1);line-height:40rpx;">
								立即充值</view>
							
						</view>
					</view>
				</view>
				<view style="height:20rpx;"></view>
			</scroll-view>

			<!-- 遮罩弹窗 -->
			<graceShade background="rgba(0,0,0,0.8)" :show="show">
				<view class="chai_tan">
					<image src="../../static/tanhao.png" class="tanhao"></image>
					<text class="wenzi">拆分后只能自己使用</text>
					<view @tap="c_tanchuang" class="c_queren">确认</view>
					<view @tap="show_tanchuang" class="c_queren2">取消</view>
				</view>
			</graceShade>

			<!-- 底部购买优惠券弹框 -->
			<graceBottomDialog :show="yhshow" v-on:closeDialog="closeDialog3">
				<scroll-view scroll-y slot="content" style="background:rgba(255,234,169,1)">
					<!-- 购买抵用券数据组件 -->
					<graceTanKuang :tejia="tejia" @closeDialog3="closeDialog3"></graceTanKuang>
				</scroll-view>
			</graceBottomDialog>

		</view>
	</gracePage>
</template>

<script>
	import graceBottomDialog from '../../graceUI/components/graceBottomDialog.vue';
	import gracePage from "../../graceUI/components/gracePage.vue";
	import graceShade from "../../graceUI/components/graceShade.vue";
	import graceTanKuang from "../../components/tan-kuang/graceTanKuang.vue";
	export default {
		data() {
			return {
				button_color:'',//按钮颜色
				tupian: '../../static/card_coupon2_chai.png',
				show_info_list: [], // 抵扣券列表数据
				weishiyong: 'xuanzhong',
				yishiyong: 'weixuanzhong',
				chai_show: false,
				zhuangrang: true,
				show: false,
				page: 0,
				limit: 20,
				type: '可用',
				quanbao: 0,
				chai_id: '',
				name: '',
				yhshow: false,
				tejia: [],
				imgs: '', // 购买抵扣券广告图
				level_grade: ''
			}
		},
		onShow: function() {
			var user = uni.getStorageSync('storage_key');
			console.log(user);
			this.level_grade = user.level_grade
			this.show_info_list = [];
			this.page = 0;
			this.jiazai()
			this.tanhcuang_img()
			this.button_color = uni.getStorageSync('button_color');
		},
		methods: {
			gmyhquan() {
				this.yhshow = true;
			},
			closeDialog3: function() {
				this.yhshow = false;
				uni.showTabBar();
			},
			tanhcuang_img() {
				var vm = this;
				vm.myPost(
					'api/deductioncoupons/get_coupons_config', {},
					function(res) {
						console.log(res.data);
						if (res.code == 200) {
							vm.tejia = res.data
						} else {
							uni.showToast({
								title: res.msg,
								icon: 'none'
							})
						}
					}
				)
			},
			shiyong_tap(id) {
				var vm = this;
				vm.req.post(
					vm.lochost + '/mytrunk/discounts/shi_yong', {
						id: id
					}, {},
					function(res) {
						vm.show_info_list = [];
						vm.page = 0;
						vm.jiazai();
						vm.msg_show(res.msg);

					}
				)
			},
			show_tanchuang() {
				this.show = false;
			},
			c_tanchuang() {
				var vm = this;
				vm.req.post(
					vm.lochost + '/mytrunk/discounts/chaifen', {
						id: vm.chai_id
					}, {},
					function(res) {
						vm.tupian = res.data.tupian;
						vm.show_info_list = [];
						vm.page = 0;
						vm.jiazai();
					}
				)
				this.show = false;
			},
			card_chai(id) {
				this.chai_id = id
				this.show = true;
			},
			// 抵用券立即购买跳转页面事件
			gomaiq(id){
				uni.navigateTo({
					url: '/pages/index/buy_coupons?coupons_id='+id
				})
			},
			// 加载抵扣券数据
			jiazai() {
				this.page += 1;
				this.get_info();
			},
			// 获取抵扣券列表
			get_info() {
				var vm = this;
				vm.myPost(
					'api/deductioncoupons/get_coupons_list', {
						page: vm.page,
						limit: vm.limit,
						type: vm.type,
					},
					function(res) {
						if (res.code == 200) {
							vm.imgs = res.data.gunaggao.img
							var data = res.data.data.data;
							for (let i = 0; i < data.length; i++) {
								vm.show_info_list.push(data[i])
							}
						}else{
							uni.showToast({
								title: res.msg,
								icon: 'none'
							})
						}

					}
				)
				this.userts()
			},
			// 获取券包余额
			userts(){
				var vm = this
				vm.myPost(
					'api/Userapi/getuser',{},function(res){
						if(res.code == 200){
							vm.quanbao  = res.data.coupons
						}else{
							uni.showToast({
								title: res.msg,
								icon: 'none'
							})
						}
					}
				)
			},
			// 未使用
			weishiyong_tap() {
				this.weishiyong = 'xuanzhong';
				this.yishiyong = 'weixuanzhong';
				this.show_info_list = [];
				this.type = '可用',
					this.page = 0;
				this.jiazai();
			},
			// 已使用
			yishiyong_tap() {
				this.weishiyong = 'weixuanzhong';
				this.yishiyong = 'xuanzhong';
				this.show_info_list = [];
				this.type = '不可用',
					this.page = 0;
				this.jiazai();
			},
			// 转让页面跳转事件
			zhuanrs(id,numbers){
				uni.navigateTo({
					url:'/pages/index/card_coupon_zhuanrang?b_user_id='+ id + '&diyongquanbianma=' + numbers
				})
			},
			// 立即充值
			lijisy(id) {
				var vm = this
				vm.myPost(
					'api/deductioncoupons/coupons_recharge', {
						coupons_id: id
					},
					function(res) {
						if (res.code == 200) {
							uni.showToast({
								title: res.msg,
								icon: 'none'
							})
							vm.show_info_list = [];
							vm.page = 0;
							setTimeout(function(){
								vm.jiazai()
							},1200)
							
						}
					}
				)
			},
			// 立即使用
			tiaozhuan() {
				uni.switchTab({
					url: '/pages/index/index1'
				});
			}
		},
		components: {
			gracePage,
			graceShade,
			graceBottomDialog,
			graceTanKuang
		}
	}
</script>

<style>
	page {
		background-color: #F7F7F7;
	}

	.xuanzhong {
		width: 320rpx;
		height: 74rpx;
		border: 5rpx solid rgba(48, 207, 0, 1);
		box-shadow: 2rpx 2rpx 0px 0px rgba(10, 2, 4, 0.29);
		font-size: 30rpx;
		font-weight: 500;
		color: rgba(48, 207, 0, 1);
		text-align: center;
		line-height: 74rpx;
	}

	.weixuanzhong {
		width: 320rpx;
		height: 74rpx;
		border: 2rpx solid rgba(153, 153, 153, 1);
		font-size: 30rpx;
		font-weight: 500;
		color: rgba(153, 153, 153, 1);
		text-align: center;
		line-height: 74rpx;
	}

	.hebin {

		width: 100%;
		height: 80rpx;
		background-color: #DA1C1E;
	}

	.hebin_quan {
		line-height: 80rpx;
		margin-left: 26rpx;
		font-size: 44rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #FFFFFF;
	}

	.hebin_quan1 {
		font-size: 32rpx;
		font-family: Impact;
		font-weight: 400;
		color: rgba(255, 255, 255, 1);
		margin-left: 18rpx;
		margin-right: 10rpx;
	}

	.hebin_quan2 {
		font-size: 62rpx;
		font-family: Impact;
		font-weight: 400;
		color: rgba(255, 255, 255, 1);
	}

	.hebin_quan3 {
		display: inline-block;
		position: absolute;
		width: 120rpx;
		height: 40rpx;
		line-height: 40rpx;
		color: #EF8350;
		background-color: #FFFFFF;
		border-radius: 20rpx;
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: bold;
		right: 0;
		margin-right: 10rpx;
		transform: translateY(30rpx);
		text-align: center;
	}

	.chai_tan {
		width: 540rpx;
		height: 340rpx;
		background-color: #FFFFFF;
		border-radius: 10rpx;
	}

	.tanhao {
		width: 54rpx;
		height: 54rpx;
		margin-top: 50rpx;
		margin-left: 244rpx;
	}

	.wenzi {
		display: block;
		font-size: 38rpx;
		margin-top: 48rpx;
		margin-left: 97rpx;
	}

	.c_queren {
		position: relative;
		top: 60rpx;
		width: 270rpx;
		height: 70rpx;
		background: rgba(218, 28, 30, 1);
		border-radius: 0rpx 0rpx 0rpx 10rpx;
		font-size: 34rpx;
		font-weight: 400;
		color: rgba(255, 255, 255, 1);
		text-align: center;
		line-height: 70rpx;
		display: inline-block;
	}

	.c_queren2 {
		position: relative;
		top: 60rpx;
		width: 270rpx;
		height: 70rpx;
		background: rgba(255, 78, 80, 1);
		border-radius: 0rpx 0rpx 10rpx 0rpx;
		font-size: 34rpx;
		font-weight: 400;
		color: rgba(255, 255, 255, 1);
		text-align: center;
		line-height: 70rpx;
		display: inline-block;
	}
</style>


<!-- .grace-flex // 声明 flex
.grace-rows // flex 横向
.grace-columns  //flex 竖向
.grace-wrap //flex 自动换行
.grace-nowrap //flex 横向不换行
.grace-space-between //flex 横向两端对齐
.grace-flex-end //flex 横向右对齐
.grace-flex-center  //flex 横向居中
.grace-flex-top  //flex 垂直顶端对齐
.grace-flex-vcenter //flex 垂直居中对齐
.grace-flex-bottom //flex 垂直底部对齐
.grace-no-scale //元素不缩放 -->
